<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        body {
            background-color: #dbdde0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #d1 {
            background-color: #333;
            width: 100%;
            height: 63px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #img1 {
            width: 980px;
            height: 63px;
        }

        #img1 img {
            width: 180px;
            height: 100%;
        }

        #ssk {
            background-color: #525362;
            width: 290px;
            height: 30px;
        }

        #dht {
            background-color: #222;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #menu {
            width: 539px;
            display: flex;
        }

        #menu div {
            color: white;
            width: 75px;
            text-align: center;
            margin-right: 1px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(143, 140, 140, 0.1);
        }

        #sy {
            border-bottom-color: red;
            border-bottom-style: solid;
        }

        #jg:hover {
            background-color: #3f95eb;
        }

        #tz:hover {
            background-color: #6ee16e;
        }

        #zz:hover {
            background-color: #fa8517;
        }

        #djt:hover {
            background-color: #45e0e2;
        }

        #hd:hover {
            background-color: #99ec99;
        }

        #sc:hover {
            background-color: orange;
        }

        #sy:hover {
            cursor: pointer;
            background-color: red;
        }

        #tooltip {
            display: flex;
            width: 387px;
        }

        #app {
            font-size: 16px;
            margin-right: 1px;
            width: 60px;
            color: gray;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #2a2a2a;
        }

        #app:hover {
            cursor: pointer;
            background-color: rgba(143, 140, 140, 0.588);
        }

        #tg {
            background-color: #27b3f3;
            color: white;
            width: 60px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        #tg:hover {
            cursor: pointer;
        }

        #t2 {
            width: 120px;
            height: 50px;
            line-height: 50px;
            color: gray;
            text-align: center;
        }

        #t2 span:hover {
            color: orange;
            cursor: pointer;
        }

        #Div1 {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        #d2 {
            height: 535px;
        }

        #d3 {
            background-color: white;
            width: 980px;
            height: 505px;
            display: flex;
            justify-content: left;
        }

        #d4 {
            width: 290px;
            height: 535px;
            background-color: blue;
        }

        #xwzx {
            width: 600px;
            height: 25px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }

        #l1 {
            width: 180px;
            height: 485px;
            margin-top: 20px;
            margin-right: 20px;
            border-bottom-style: solid;
            border-bottom-color: #313131;
            border-bottom-width: 3px;
        }

        #l1 #focus {
            width: 180px;
            height: 55px;
            background-color: #454545;
        }

        #l1 #focus span {
            float: right;
            padding-right: 20px;
        }

        #l1 #focus #focus-1 {
            height: 55px;
            width: 100px;
            float: right;
            margin-top: 5px;
        }

        #l1 #jd {
            color: white;
            font-weight: 800;
        }

        #l1 #FOC {
            color: gray;
            font-weight: 800;
        }

        #r1 {
            width: 750px;
            height: 485px;
            margin-top: 20px;
            border-bottom-style: solid;
            border-bottom-color: #313131;
            border-bottom-width: 3px;
        }

        #r1 img {
            width: 100%;
        }

        #r1 #d5 {
            display: flex;
            justify-content: center;
        }

        #r1 #r1-bottom {
            width: 376px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            cursor: pointer;
        }

        #r1 #r1-bottom div {
            width: 78px;
            height: 44px;
            background-color: yellow;
        }

        #r1 #r1-bottom div img {
            width: 100%;
        }

        #xwzx div {
            background-color: red;
            width: 60px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: white;
            font-weight: bold;
            text-align: center;
        }

        #xwzx span {
            font-size: 12px;
            margin-left: 10px;
            color: #1852d0;
        }

        #focus-nr1 {
            cursor: pointer;
            border-right-style: solid;
            border-bottom-style: solid;
            border-color: #cacaca;
            border-width: 1px;
            width: 155px;
            height: 82px;
            float: right;
        }

        #focus-nr1 :hover {
            color: red;
        }

        #focus-nr1 div {
            margin-left: 20px;
            width: 120px;
            height: 50px;
            margin-top: 10px;
        }

        #focus-nr1 span {
            color: gray;
            float: right;
        }

        #focus-nr1 #sp1 {
            font-size: 16px;
        }

        #focus-nr1 #sp2 {
            font-size: 13px;
            text-wrap: nowrap;
        }

        #zz-2 {
            width: 290px;
            height: 40px;
            background-color: #252323;
            color: white;
            float: left;
            line-height: 40px;
        }

        #zz-2 span {
            margin-left: 10px;
        }

        #ewm {
            width: 290px;
            height: 150px;
            background-color: #464646;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #ewm #ewm1 {
            width: 250px;
            display: flex;
            justify-content: space-between;
            color: white;
            text-align: center;
            font-size: 13px;
        }

        #ewm #ewm1 img {
            width: 100px;
        }

        #d7 {
            background-color: white;
            font-size: 0;
            cursor: pointer;
        }

        #d7 img {
            width: 100%;
        }

        #zz-img {
            width: 290px;
            height: 130px;
            background-color: #464646;
            border-color: gray;
            border-top-style: solid;
            border-bottom-style: solid;
            border-top-width: 1px;
            border-bottom-width: 1px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #zz-img img {
            width: 70px;
            margin-right: 10px;
        }

        #zggj {
            width: 290px;
            height: 60px;
            background-color: #252323;
            color: white;
            text-align: center;
            font-size: 18px;
            line-height: 60px;
        }

        #jj {
            display: flex;
            justify-content: center;
            width: 290px;
            height: 70px;
            background-color: #252323;
            color: gray;
            text-align: center;
            font-size: 13px;
        }

        #jj span {
            width: 18em;
            height: 80px;
            display: block;
            margin-top: 20px;
        }

        #hd-2 {
            height: 35px;
            background-color: #252323;
            border-color: gray;
            border-top-style: solid;
            border-bottom-style: solid;
            border-top-width: 1px;
            border-bottom-width: 1px;
            color: white;
            line-height: 30px;
        }

        #hd-2 span {
            margin-left: 10px;
        }

        #r1 {
            width: 750px;
            height: 485px;
            margin-top: 20px;
            border-bottom-style: solid;
            border-bottom-color: #313131;
            border-bottom-width: 3px;
        }

        #r1 img {
            width: 100%;
        }

        #r1 #d5 {
            display: flex;
            justify-content: center;
        }

        #r1 #r1-bottom {
            width: 376px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            cursor: pointer;
        }

        #r1 #r1-bottom div {
            width: 78px;
            height: 44px;
            background-color: yellow;
        }

        #r1 #r1-bottom div img {
            width: 100%;
        }
    </style>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

<body>
    <header></header>
    <div id="d1">
        <div id="img1">
            <img src="../img/1.PNG" alt="">
        </div>
        <div id="ssk">

        </div>
    </div>
    <div id="dht">
        <div id="menu">
            <div id="sy">首页</div>
            <div id="jg">景观</div>
            <div id="tz">谈资</div>
            <div id="zz">作者</div>
            <div id="djt">大讲堂</div>
            <div id="hd">活动</div>
            <div id="sc">商城</div>
        </div>
        <div id="tooltip">
            <div id="app">APP</div>
            <div id="tg">投稿</div>
            <div id="t2"><span>登录/注册</span></div>
            <div id="t2"><span>快速登陆:</span></div>
        </div>
    </div>
    <div id="Div1">
        <div id="d2">
            <div id="xwzx">
                <div>新闻咨询：</div>
                <span>陪中国少年，看中国河山 ——中国国家地理X中信银行“少年看中国”主题活动2024乘风开启</span>
            </div>
            <div id="d3">
                <div id="l1">
                    <div id="focus">
                        <div id="focus-1">
                            <span id="jd">焦点</span><br>
                            <span id="FOC">FOCUS</span>
                        </div>
                    </div>
                    <div id="focus-nr1">
                        <div>
                            <span id="sp1">安徽专辑（下）</span><br>
                            <span id="sp2">凤凰涅槃新安徽</span>
                        </div>
                    </div>
                    <div id="focus-nr1">
                        <div>
                            <span id="sp1">安徽专辑（上）</span><br>
                            <span id="sp2">默默为中国生产模式的省</span>
                        </div>
                    </div>
                    <div id="focus-nr1">
                        <div>
                            <span id="sp1">冬季赛里木湖</span><br>
                            <span id="sp2">湖冰形态太神奇</span>
                        </div>
                    </div>
                    <div id="focus-nr1">
                        <div>
                            <span id="sp1">海马冷泉</span><br>
                            <span id="sp2">千米深海中的“绿洲”</span>
                        </div>
                    </div>
                    <div id="focus-nr1">
                        <div>
                            <span id="sp1">河西走廊</span><br>
                            <span id="sp2">相机找回的古城传奇</span>
                        </div>
                    </div>
                </div>
                <div id="r1">
                    <div>
                        <img src="../img/2.1.png" alt="">
                    </div>
                    <div id="d5">
                        <div id="r1-bottom">
                            <div>
                                <img src="../img/2.1.png" alt="">
                            </div>
                            <div>
                                <img src="../img/2.2.png" alt="">
                            </div>
                            <div>
                                <img src="../img/2.3.png" alt="">
                            </div>
                            <div>
                                <img src="../img/2.4.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="d4">
            <div id="d7">
                <img src="../img/zgzm.png" alt="" id="img2">
            </div>
            <div id="d6">
                <div id="zz-2"><span>杂志</span></div>
                <div id="zz-img">
                    <div>
                        <img src="../img/zz.1.png" alt="">
                        <img src="../img/zz.2.png" alt="">
                        <img src="../img/zz.3.png" alt="">
                    </div>
                </div>
                <div id="zggj">中国国家地理微信公众平台</div>
                <div id="ewm">
                    <div id="ewm1">
                        <div>
                            <img src="../img/ewm.1.png" alt="">
                            <div>订阅号</div>
                        </div>
                        <div>
                            <img src="../img/ewm.2.png" alt="">
                            <div>服务号</div>
                        </div>
                    </div>
                </div>
                <div id="jj"><span>使用微信扫描二维码进行关注，或微信中搜索“中国国家地理”关注。</span></div>
                <div id="hd-2"><span>活动</span></div>
            </div>
        </div>
    </div>
</body>

</html>